<template>
  <div class="detail" v-if="goodDetail">
    <my-header :title="goodDetail.name"></my-header>
    <div class="wrap">
      <!-- 图片、价格、... -->
      <div class="info">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(l, i) in goodDetail.img" :key="i">
            <img :src="l" alt="" />
          </van-swipe-item>
        </van-swipe>

        <!-- 价格 -->
        <div class="cost">
          <p class="price"><span>￥</span>{{ goodDetail.maxPrice }}</p>
        </div>
      </div>

      <!-- title -->
      <div class="title">
        <p class="stitle">{{ goodDetail.name }}</p>
        <div class="want">
          <van-badge :content="likeCount">
            <div class="child" @click="changeLike(goodDetail.itemsId)">
              <span
                ><i
                  class="iconfont"
                  :class="isLike ? 'icon-aixin1' : 'icon-aixin'"
                ></i
              ></span>
            </div>
          </van-badge>
        </div>
      </div>

      <!-- 商品参数 -->
      <div class="paraminfo">
        <!-- 参数 -->
        <van-cell is-link center>
          <div class="par">
            <div class="pitem">
              <p>{{ goodDetail.attrList[0].attrName }}</p>
              <p>{{ goodDetail.attrList[0].attrValue }}</p>
            </div>
            <div class="pitem">
              <p>{{ goodDetail.attrList[1].attrName }}</p>
              <p>{{ goodDetail.attrList[1].attrValue }}</p>
            </div>
            <div class="pitem">
              <p>{{ goodDetail.attrList[2].attrName }}</p>
              <p>{{ goodDetail.attrList[2].attrValue }}</p>
            </div>
            <div class="pitem">
              <p>{{ goodDetail.attrList[3].attrName }}</p>
              <p>{{ goodDetail.attrList[3].attrValue }}</p>
            </div>
          </div>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">参数</span>
          </template>
        </van-cell>

        <!-- IP -->
        <van-cell is-link center>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">IP</span>
            <span class="custom-text">{{
              goodDetail.ipRightList[0].ipRightName
            }}</span>
          </template>
        </van-cell>

        <!-- 品牌 -->
        <van-cell is-link center>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-text">品牌</span>
          </template>
        </van-cell>

        <!-- 放心购 -->
        <van-cell is-link center>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="safe">
              <p class="top">
                <span>{{ goodDetail.commitmentTag[0].name }}</span>
                <span>{{ goodDetail.commitmentTag[1].name }}</span>
                <span>{{ goodDetail.commitmentTag[2].name }}</span>
              </p>
              <p class="bottom">
                <span>{{ goodDetail.commitmentTag[3].name }}</span>
              </p>
            </div>
          </template>
        </van-cell>
      </div>

      <!-- 晒图讨论 -->
      <!-- ugcListVO -->

      <!-- 相关推荐 -->
      <div class="recommend">
        <div class="rtitle">相关推荐</div>
        <div class="ritemwrap">
          <div
            class="ritem"
            v-for="(item, index) in goodDetailRecommend"
            :key="index"
          >
            <img
              v-lazy="item.img[0]"
              alt=""
              @click="gotoRecommendDetail(item.itemsId)"
            />
            <p class="title">{{ item.name }}</p>
          </div>
        </div>
      </div>

      <!-- 别人的评论数据 -->
      <div class="otherComment" v-if="commonList" @click="showPopup">
        <!-- @click="gotoOtherCommentAll()" -->
        <h2>评价/晒图讨论</h2>
        <div class="ocitem" v-if="commonList[0]">
          <div class="top">
            <!-- <p v-if="commonList[0]">{{ commonList[0].content}}</p> -->
            <img v-lazy="commonList[0].userinfo.avatar" alt="" />
            <p class="info">
              <span>id: {{ commonList[0].userinfo.mid }}</span>
              <span>uname: {{ commonList[0].userinfo.uname }}</span>
            </p>
          </div>
          <div class="bottom">
            <p class="tit">评论内容:</p>
            <p class="text">{{ commonList[0].content }}</p>
          </div>
        </div>
      </div>
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '80%' }"
        round
        closeable
      >
        <!-- other all comment -->
        <div class="oac">
          <div class="head">
            <h2 class="oactitle">晒图/讨论{{ total }}</h2>

            <van-cell>
              <template #title>
                <span class="all btn">全部</span>
                <span class="hasimg btn">有图</span>
              </template>
            </van-cell>
          </div>

          <div class="oac-content">
            <div
              class="itemwrap"
              v-for="(item3, index3) in commonList"
              :key="index3"
            >
              <div class="top">
                <img v-lazy="item3.userinfo.avatar" alt="头像" />
                <p class="uname">{{ item3.userinfo.uname }}</p>
                <span class="level">Lv{{ item3.userinfo.level }}</span>
              </div>
              <div class="itemcontent">
                <p class="text">{{ item3.content }}</p>
                <div class="imgcontainer">
                  <img
                    v-lazy="item4"
                    alt=""
                    v-for="(item4, index4) in item3.imgs"
                    :key="index4"
                  />
                  <!-- @click="preview(index4)" -->
                </div>
                <!-- 判断是否有子回复 -->
                <div class="sub" v-if="item3.subCommentList">
                  <div
                    class="subtop"
                    v-for="(item5, index5) in item3.subCommentList"
                    :key="index5"
                  >
                    <div class="ttop">
                      <img v-lazy="item5.userinfo.avatar" alt="头像" />
                      <p class="uname">{{ item5.userinfo.uname }}</p>
                      <span class="level">Lv{{ item5.userinfo.level }}</span>
                    </div>
                    <div class="subitem">
                      <p>{{ item5.content }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>

      <!-- 商品详情 -->
      <!-- detailDescVO -->
      <div class="detailed">
        <div class="dtitle">
          <h2>商品详情</h2>
        </div>

        <div class="intro">
          <!-- detailDescVO -->
          <div class="ititle" v-if="goodDetail.detailDescVO">
            <p>detailDescVO</p>
            <div class="detailDescVO" v-for="(d1, di1) in goodXq" :key="di1">
              <p class="subtitle">
                <i class="iconfont icon-hezi"></i>&nbsp;
                <span>{{ d1.title }}</span>
              </p>
              <div
                class="subimgwrap"
                v-for="(d2, di2) in d1.contentList"
                :key="di2"
              >
                <!-- {{d2.content}} - {{di2}} -->
                <div class="subtext" v-if="d2.content.substring(0, 1) != '/'">
                  {{ d2.content }}
                </div>
                <div v-else class="pabox">
                  <img class="subimg" v-lazy="d2.content" alt="" />
                </div>
              </div>
            </div>
          </div>

          <!-- mobileDesc -->
          <div v-else>
            <p>mobileDesc</p>
            <!-- <div class="mobileDesc" v-for="(m1,mi1) in goodXq" :key="mi1">
              <p>{{m1}}</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <Detail-footer
      :goodDetail="goodDetail"
      :cartsCount="cartsCount"
    ></Detail-footer>
  </div>
</template>

<script>
import DetailFooter from "@/components/DetailFooter";

export default {
  data() {
    return {
      // 商品详情数据
      goodDetail: null,
      // 商品详情页推荐商品数据,
      goodDetailRecommend: [],

      //商品介绍下
      goodXq: [],
      // 购物车中的商品数量
      cartsCount: 0,
      likeCount: 0,
      isLike: false,

      // 别人的评论数据
      commonList: [],

      // 评论弹出层
      show: false,

      // 总评论条数
      total: 0,
    };
  },
  methods: {
    // 图片预览
    // preview(index) {
    //   ImagePreview({
    //     images: this.obj.photos,
    //     startPosition: index,
    //   });
    // },
    // 跳转到别人的所有评论数据
    gotoOtherCommentAll() {
      this.$router.push({
        name: "othercommentall",
        query: { itemsId: this.$route.query.itemsId },
      });
    },
    // 跳转到推荐商品的详情页
    gotoRecommendDetail(itemsId) {
      this.$router.push({ name: "detail", query: { itemsId: itemsId } });
    },
    // 获取商品详情
    async getGoodDetail() {
      let res = await this.$ajax
        .getGoodDetailData({ itemsId: this.$route.query.itemsId })
        .then((res) => {
          //   console.log(res);
          this.goodDetail = res.data;
          // console.log(this.goodDetail);
          this.goodXq = res.data.mobileDesc
            ? res.data.mobileDesc
            : res.data.detailDescVO.descList;
          console.log(this.goodXq);
          this.getGoodDetailRecommend();

          this.getLikeCount();

          this.getOtherComment();
        });
      this.changeLikeClass(this.goodDetail.itemsId);
    },
    // 获取商品详情页推荐
    async getGoodDetailRecommend() {
      let res = await this.$ajax
        .getGoodDetailRecommendData({
          itemsId: this.$route.query.itemsId,
          shopId: this.goodDetail.shopId,
          itemsVersion: "",
          msource: " ",
          trackId: "",
          v: new Date().getTime(),
        })
        .then((res) => {
          // console.log(res);
          this.goodDetailRecommend = res.data.items;
          // console.log(this.goodDetailRecommend);
        });
    },
    // 获取购物车列表
    async getCart() {
      let res = await this.$ajax.getCartData({ phone: this.userInfo.phone });
      // console.log(res);
      // 得到长度(商品数量)
      this.cartsCount = res.length;
      console.log(this.cartsCount);
    },
    // 改变点赞状态
    async changeLike(gid) {
      let result = await this.$ajax.checkLikeStatusData({
        phone: this.userInfo.phone,
        gid: gid,
        // like: true,
      });
      // console.log(result);
      if (result.length > 0) {
        // 如果有数据 则一定有like属性 需判断
        // 1. Like为false的情况
        // 2. Like为true的情况
        if (result[0].like) {
          // like为true，修改为false
          let res1 = await this.$ajax.cancelLikeStatusData(result[0].id, {
            like: false,
          });
        } else {
          // like为false，修改为true
          let res2 = await this.$ajax.cancelLikeStatusData(result[0].id, {
            like: true,
          });
        }
      } else {
        // 如果length<0 则一定是没有数据的状态
        // 执行添加数据的函数  且like为true
        let res3 = await this.$ajax.changeLikeStatusData({
          phone: this.userInfo.phone,
          gid: gid,
          like: true,
        });
      }
      this.changeLikeClass(gid);
      this.getLikeCount();
    },
    // 根据like值修改like样式
    async changeLikeClass(gid) {
      let res = await this.$ajax.checkLikeStatusData({
        phone: this.userInfo.phone,
        gid: gid,
        like: true,
      });
      // console.log(res);
      if (res.length > 0) {
        this.isLike = true;
      } else {
        this.isLike = false;
      }
    },
    // 获取当前商品的likeCount值，即like为true的length
    async getLikeCount() {
      let res = await this.$ajax.checkLikeStatusData({
        gid: this.$route.query.itemsId,
        like: true,
      });
      this.likeCount = res.length;
      // console.log(this.likeCount);
    },
    // 获取别人的评论数据
    async getOtherComment() {
      let res = await this.$ajax.getOtherCommentData({
        device: "h5",
        ignoreEssenceIds: [],
        ignoreHotIds: [],
        mid: -1,
        pageNum: 1,
        pageSize: 20,
        platform: 2,
        scene: "item_detail_page",
        subPageSize: 2,
        // subjectId: "10076608",
        subjectId: this.goodDetail.itemsId.toString(),
        subjectType: 1,
        version: "1.1",
      });
      this.commonList = res.data.commonList;
      console.log(this.commonList);
      this.total = res.data.total;
    },
    // 显示全部评论弹出层
    showPopup() {
      this.show = true;
    },
  },
  mounted() {
    this.getGoodDetail();
    this.getCart();
    this.getLikeCount();
  },
  computed: {},
  components: {
    DetailFooter,
  },
  // filters:{
  //   detailDescVOisImg(value){
  //     if(!value) return value
  //     if(value.substring(0,1) == '/'){
  //       return
  //     }
  //     else{

  //     }
  //   },
  //   mobileDescisImg(content){

  //   }
  // }
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100vh;
  padding-bottom: 46px;
  .wrap {
    width: 100%;
    .info {
      width: 100%;
      .my-swipe {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    .cost {
      width: 100%;
      padding: 0 15px;
      .price {
        color: #ff80aa;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .title {
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      .stitle {
        font-size: 14px;
        flex: 1;
        font-weight: bold;
        height: 24px;
        line-height: 24px;
      }
      .want {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        text-align: right;
        height: 24px;
        line-height: 24px;
        .child {
          width: 40px;
          height: 40px;
          background: #f2f3f5;
          line-height: 40px;
          text-align: center;
          border-radius: 4px;
        }
        .iconfont {
          color: #f40;
          font-size: 24px;
        }
        span {
          text-align: center;
        }
        .wantcount {
          font-size: 10px;
        }
      }
    }
    .paraminfo {
      border-top: 8px solid #eee;
      margin-top: 20px;
      .par {
        display: flex;
        .pitem {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 61px;
          height: 36px;
          margin-right: 12px;
          p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;

            text-align: center;
            width: 61px;
            height: 36px;
          }
        }
      }
    }
    .recommend {
      width: 100%;
      // padding-left: 15px;
      padding: 15px 15px 0 15px;
      border-top: 8px solid #eee;
      .rtitle {
        // color: black;
        font-weight: bold;
        font-size: 14px;
      }
      .ritemwrap {
        display: flex;
        width: 100%;
        overflow-x: auto;
        margin-top: 15px;
        .ritem {
          display: flex;
          flex-direction: column;
          width: 89px;
          height: 145px;
          font-size: 12px;
          margin-right: 15px;
          .title {
            height: 30px;
            margin-top: 15px;

            display: -webkit-box;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .otherComment {
      width: 100%;
      border-top: 8px solid #eee;
      padding: 15px;
      h2 {
        font-weight: bold;
      }
      .ocitem {
        width: 100%;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          background: linear-gradient(to left, #e680ff, #ff80aa);
          border-radius: 15px;
          p {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 10px;
          }
          img {
            width: 40px;
            border: 2px solid #4d4d4d;
          }
        }
        .bottom {
          padding-top: 10px;
          color: black;
          width: 100%;
          font-size: 14px;
          overflow: hidden;
          .tit {
            color: black;
            font-weight: bold;
          }
          .text {
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #eee;
            height: 80px;
            border-radius: 15px;
          }
        }
      }
    }
    .oac {
      width: 100%;
      // padding-top: 46px;
      .head {
        position: fixed;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        margin-top: -100px;
        .oactitle {
          text-align: center;
          margin-top: 15px;
          margin-bottom: 15px;
        }
        ::v-deep .van-cell {
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }
        .btn {
          display: inline-block;
          width: 50px;
          height: 30px;
          line-height: 30px;
          border: 1px solid #eee;
          border-radius: 15px;
          text-align: center;
        }
      }
      .oac-content {
        width: 100%;
        margin-top: 100px;
        .itemwrap {
          padding: 10px;
          border-top: 1px solid #eee;
          // border-bottom: 1px solid #eee;
          .top {
            display: flex;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            .uname {
              color: #4d4d4d;
            }
            .level {
              background: red;
            }
          }
          .itemcontent {
            display: flex;
            flex-direction: column;
            margin-left: 30px;
            margin-top: 10px;
            .text {
              color: #000;
            }
            .imgcontainer {
              display: flex;
              align-items: center;
              img {
                width: 100px;
                height: 100px;
              }
            }
            .sub {
              .subtop {
                display: flex;
                flex-direction: column;
                .ttop {
                  display: flex;
                  align-items: center;
                  img {
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                  }
                }
              }
            }
          }
        }
      }
    }
    .detailed {
      width: 100%;
      border-top: 8px solid #eee;
      .dtitle {
        color: black;
      }
      .intro {
        width: 100%;
        .ititle {
          color: red;
          .detailDescVO {
            width: 100%;
            .subtitle {
              width: 100px;
              background: #f2f2f2;
              border-radius: 15px;
              color: #5c5c8a;
              font-size: 12px;
              font-weight: bold;
              height: 30px;
              line-height: 30px;
              margin-left: 12px;
              padding-left: 12px;
              .iconfont {
                font-size: 12px;
              }
            }
            .subimgwrap {
              width: 100%;
              // padding: 12px;
              .subtext {
                margin-left: 12px;
                color: #4d4d4d;
                font-size: 14px;
              }
              .pabox {
                margin: 12px 12px;
                .subimg {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>